import React,{useState,useEffect} from 'react'
import img2 from '../assets/images/3.png'
import img3 from '../assets/images/形状结合.png'
import '../assets/css/login.css'
import CaptchaComponent from './CaptchaComponent '
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Button, notification } from 'antd';

export default function Login() {
    const [isLogin,setIsLogin] = useState(true)
    const [ForgetPassword,setForgetPassword] = useState(false)
    const [register,setRegister] = useState(false)
    const [inputPhone,setInputPhone] = useState('')
    const [nweInputPhone,setnewInputPhone] = useState('')
    const [inputPwd,setInputPwd] = useState('')
    const [onePwd,setOnePwd] = useState('')
    const [twoPwd,setTwoPwd] = useState('')
    const [oneaPwd,setOneaPwd] = useState('')
    const [twoaPwd,setTwoaPwd] = useState('')
    const [api, contextHolder] = notification.useNotification();
    let nav = useNavigate();
    const toPwd = () => {
        setIsLogin(false)
        setForgetPassword(true)
    }
    const toLogin =() => {
        setIsLogin(true)
        setForgetPassword(false)
        setRegister(false)
    }
    const toRegister = () => {
        setRegister(true)
    }
     //登录验证
     const deLogin = () => {
        axios.get('http://172.16.17.120:8080/getpwd').then(res=> { 
            let loginIndex = res.data.findIndex((item) => item.user === inputPhone)
            if(loginIndex !== -1){
                if (inputPhone == res.data[loginIndex].user && inputPwd == res.data[loginIndex].paw){
                    console.log('登录成功');
                    localStorage.setItem('token','erdftyguhijadvf')
                    localStorage.setItem('zhangh',JSON.stringify(inputPhone))
                    nav('/')
                }else{
                    console.log('账号或密码错误');
                    api.open({
                        description:
                          '账号或密码错误',
                        style: {
                          display:'flex',
                          alignItems:'center',
                          justifyContent:'center',
                          position:'relative',
                          color:'red'
                        },
                      });      
                }
            } else{
                console.log('账号不存在');
                api.open({
                    description:
                      '账号不存在',
                    style: {
                      display:'flex',
                      alignItems:'center',
                      justifyContent:'center',
                      position:'relative',
                      color:'red'
                    },
                  });      
            }
        })
    }

   //修改验证
    const toModifyPwd = () => {
        axios.get('http://172.16.17.120:8080/getpwd').then(res=> { 
            // console.log(res.data[0].paw);
            // console.log(res.data.findIndex((item) => item.user === inputPhone));
            let loginIndex = res.data.findIndex((item) => item.user === inputPhone)
            if(loginIndex !== -1 && inputPhone !== ''){
                if (onePwd !== '' && twoPwd !== ''){
                    if (onePwd === twoPwd){
                        console.log(loginIndex);
                        axios.post('http://172.16.17.120:8080/xuigai',{
                            id:loginIndex+1,
                            paw:twoPwd
                        }).then(item => {
                            console.log('修改成功');
                        })
                    }else{
                        console.log('密码不一致');
                    }
                }else{
                    api.open({
                        description:
                          '密码不能空',
                        style: {
                          display:'flex',
                          alignItems:'center',
                          justifyContent:'center',
                          position:'relative',
                          color:'red'
                        },
                      });      
                }
            } else{
                api.open({
                    description:
                      '账号不存在',
                    style: {
                      display:'flex',
                      alignItems:'center',
                      justifyContent:'center',
                      position:'relative',
                      color:'red'
                    },
                  });        
            }
        })
    }


    //添加user
       const toAddPwd = () => {
        if(oneaPwd !== '' &&  twoaPwd !== '' && inputPhone !== ''){
            if (oneaPwd === twoaPwd){
                axios.post('http://172.16.17.120:8080/useradd',{
                    user:nweInputPhone,
                    paw:twoaPwd
                }).then(res => {
                    console.log('注册成功');
                    api.open({
                        description:
                          '注册成功',
                        style: {
                          display:'flex',
                          alignItems:'center',
                          justifyContent:'center',
                          position:'relative'
                        },
                      });
                })
            }else{
                console.log('密码不一致');
            }
        }else{
            api.open({
                description:
                  '账号或密码不能为空',
                style: {
                  display:'flex',
                  alignItems:'center',
                  justifyContent:'center',
                  position:'relative'
                },
              });
        }
        };
    
    const handleInputChange = (e) => {
        setInputPhone(e.target.value)
        
        // console.log(inputPhone);       
    }
    const handleInputChangepwd = (e) => {
        setInputPwd(e.target.value)
    }
    const oneModifyPwd = (e) => {
        setOnePwd(e.target.value)
    }
    const twoModifyPwd = (e) => {
        setTwoPwd(e.target.value)
    }
    const oneAddPwd = (e) => {
        setOneaPwd(e.target.value)
    }
    const twoAddPwd = (e) => {
        setTwoaPwd(e.target.value)
    }
    const gnweInputPhone = (e) => {
        setnewInputPhone(e.target.value)
    }

  return (
    <div className='login-back'>
        {contextHolder}
        <div className='log-img'>
            <img src={img2} alt="" />
        </div>
        {isLogin && <div className='llogin'>
            <p className='log-title'>登录</p>

            <div className='log-phone'>
                <div className='chine'>
                    <p>中国+86</p>
                    <p><img src={img3} alt="" /></p>
                </div>
                <input type="text"
                 placeholder='请输入手机号'
                 value={inputPhone}
                 onChange={handleInputChange}
                 />
            </div>
            <div className='log-pwd'>
                <input type="text"
                 placeholder='请输入密码'
                 value={inputPwd}
                 onChange={handleInputChangepwd}
                 />
            </div>
            <Button className='login-de'
            onClick={deLogin}
            >登录</Button>
            <div className='log-end'>
                <p onClick={toPwd}>忘记密码</p>
                <p onClick={toRegister}>免费注册</p>
            </div>
        </div>}
        {ForgetPassword && <div className='llogin'>
            <p className='pwd-title'>忘记密码</p>
            <div className='log-phone'>
                <div className='chine'>
                    <p>中国+86</p>
                    <p><img src={img3} alt="" /></p>
                </div>
                <input type="text" 
                value={inputPhone}
                onChange={handleInputChange}
                placeholder='请输入手机号'/>
            </div>
            <div className='pwd-yanz'>
                <input type="text" placeholder='验证码'/>
                <CaptchaComponent></CaptchaComponent>
            </div>
            <div className='xui-pwd'>
                <input type="text" value={onePwd} onChange={oneModifyPwd} placeholder='请输入密码,包含数字和字母的8-20位密码' />
                <input type="text" value={twoPwd} onChange={twoModifyPwd} placeholder='确认密码'/>
            </div>
            <Button 
            className='login-de' 
            onClick={toModifyPwd}
            >确定修改</Button>
            <p className='end-title'>已有账号， 立即<span onClick={toLogin}>登录</span></p>
        </div>}
        {register && <div className='llogin'>
            <p className='pwd-title'>注册</p>
            <div className='log-phone'>
                <div className='chine'>
                    <p>中国+86</p>
                    <p><img src={img3} alt="" /></p>
                </div>
                <input type="text" value={nweInputPhone} onChange={gnweInputPhone} placeholder='请输入手机号'/>
            </div>
            <div className='pwd-yanz'>
                <input type="text" placeholder='验证码'/>
                <CaptchaComponent></CaptchaComponent>
            </div>
            <div className='xui-pwd'>
                <input type="text" value={oneaPwd} onChange={oneAddPwd} placeholder='请输入密码,包含数字和字母的8-20位密码' />
                <input type="text" value={twoaPwd} onChange={twoAddPwd} placeholder='确认密码'/>
            </div>
            <div className='lxiey'>
                <input type="checkbox" />
                <p>已阅读并同意 <span>《用户使用协议》</span></p>
            </div>
            <Button 
            className='login-de' 
            style={{marginTop:10}} 
            onClick={toAddPwd}>注册</Button>
            <p className='end-title'>已有账号， 立即<span onClick={toLogin}>登录</span></p>
        </div>}
    </div>
  )
}
